<template>
  <div>
    <el-table
      id="table"
      v-loading="loading"
      :data="data"
      stripe
      border
      fit
      highlight-current-row
      @sort-change="handleSortChange"
    >
      <el-table-column
        v-if="index"
        key="_index"
        type="index"
        align="center"
        :label="index.label || '#'"
        :width="index.width || 50"
      />

      <el-table-column
        v-if="debug"
        key="id"
        sortable="custom"
        label="ID"
        prop="id"
        align="center"
        width="80"
        :class-name="getSortClass('id')"
      >
        <template slot-scope="{ row }">
          <span>{{ row.id }}</span>
        </template>
      </el-table-column>

      <!-- 根据 columns 循环, 展示其他 col -->
      <el-table-column
        v-for="col in columns"
        :key="col.name"
        :label="col.label"
        :prop="col.name"
        :sortable="col.sortable ? 'custom' : false"
        :width="col.width ? col.width : '200'"
        align="center"
        :class-name="getSortClass(col.name)"
      >
        <template slot-scope="{ row }">
          <span v-if="col.type === 'check'">
            {{ row[col.name] ? '是' : row[col.name] === false ? '否' : '未知' }}
          </span>
          <span v-else-if="['select', 'select2', 'radio'].includes(col.type)">
            {{
              col.multiple
                ? row[`${col.name}__names`]
                : row[`${col.name}__name`]
            }}
          </span>
          <span v-else-if="col.type === 'image'">
            <img :src="get_image(col, row)" />
          </span>
          <span v-else>{{ row[col.name] }}</span>
        </template>
      </el-table-column>

      <el-table-column
        key="_handle"
        :label="handleBtn.label || '操作'"
        :width="handleBtn.width || 200"
        align="center"
      >
        <template slot-scope="{ row }">
          <slot name="button" :row="row" />
          <el-button
            v-if="handleBtn.viewPath"
            type="primary"
            size="small"
            icon="el-icon-link"
            @click="handleViewPath(row)"
          />
          <el-button
            v-if="handleBtn.viewBtn"
            type="primary"
            size="small"
            icon="el-icon-view"
            @click="handleRowView(row)"
          />

          <el-button
            v-if="handleBtn.editBtn !== false"
            type="primary"
            size="small"
            icon="el-icon-edit"
            @click="handleRowUpdate(row)"
          />

          <el-button
            v-if="handleBtn.delBtn !== false"
            type="danger"
            size="small"
            icon="el-icon-delete"
            @click="handleRowDel(row)"
          />
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
//
import odooConfig from '@/../odoo.config'

export default {
  name: 'TableColumnButton',
  components: {},
  directives: {},
  filters: {},

  props: {
    loading: { type: Boolean, default: false },
    data: { type: Array, default: () => [] },

    handleBtn: {
      type: Object,
      default: () => {
        return {}
      }
    },

    columns: { type: Array, default: () => [] },

    index: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },

  data() {
    return {
      debug: odooConfig.debug,
      sort: []
    }
  },

  computed: {
    //
  },

  methods: {
    get_image(col, row) {
      // src="dev-api/web/image?model=res.partner&id=3&field=image_128&ss=1"

      const baseURL = process.env.VUE_APP_BASE_API

      let url_value

      const image_load = row[col.name]
      if (image_load) {
        url_value = `data:image/jpeg;base64,${image_load}`
      } else if (row.id) {
        const {
          url,
          params: { model, field }
        } = col.url

        url_value = `${baseURL}${url}?model=${model}&id=${row.id}&field=${field}`
      }

      // console.log('xxxxxx, get_image', url_value)
      return url_value

      //

      // const image = this.value[field]
      // if (!image) {
      //   return undefined
      // } else {
      //   const url = `data:image/jpeg;base64,${image}`

      //   return url
      //   // 'https://www.w3school.com.cn/i/eg_cute.gif'
      // }
    },

    handleViewPath(row) {
      this.$emit('row-link', row)
    },
    handleRowView(row) {
      console.log('xxxx, handleRowView')
      this.$emit('row-view', row)
    },
    handleRowUpdate(row) {
      this.$emit('row-update', row)
    },
    handleRowDel(row) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        // eslint-disable-next-line space-before-function-paren
        .then(async () => {
          // this.rowDel(row)
          this.$emit('row-del', row)
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },

    handleSortChange({ column, prop, order }) {
      this.sort = this.sort.reduce(
        (acc, cur) => {
          if (prop !== cur.prop) {
            acc.push(cur)
          }
          return acc
        },
        [{ prop, order }]
      )

      this.$emit('sort-change', this.sort)
    },

    getSortClass: function(key) {
      const sorts = this.sort.slice(0, 2).reduce((acc, cur) => {
        acc[cur.prop] = cur.order
        return acc
      }, {})

      return sorts[key]
    }
  }
}
</script>
